<!doctype html>
<html lang="zh">

<head>
  <title>Surface</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
    }
  </style>
  <script type="module">
    import '../../packages/mdui/mdui.css';
    import '../../packages/mdui/components/button.js';
  </script>
</head>

<body>
  <div>
    <h2>Surface</h2>
    <mdui-surface elevation="2" style="width: 100px;height: 100px;"></mdui-surface>
    <mdui-surface elevation="8" style="width: 100px;height: 100px;"></mdui-surface>
    <mdui-surface elevation="2" ripple style="width: 100px;height: 100px;"></mdui-surface>

    <h3>Slot</h3>
    <mdui-surface>
      <mdui-button>test</mdui-button>
    </mdui-surface>
  </div>


</body>

</html>
